<template>
  <div class="world">
    <div class="title">
      <div>
        <span>抽奖模拟</span>
      </div>
    </div>
    <div class="container">
      <div class="numLuckDraw">
        <div class="numRuleConfig">
          <div class="rangNum">
            <div
              style="
                width: 80px;
                flex-shrink: 0;
                display: flex;
                align-items: center;
              ">
              <span>数值范围：</span>
            </div>
            <el-input-number
              style="min-width: 100px; width: auto; max-width: 200px"
              v-model="fromNum"
              :precision="0"
              :min="0"
              :max="1000"
              :controls="false"></el-input-number>
            <div
              style="
                width: 20px;
                flex-shrink: 0;
                display: flex;
                justify-content: center;
                align-items: center;
              ">
              <span>~</span>
            </div>
            <el-input-number
              style="min-width: 100px; width: auto; max-width: 200px"
              v-model="toNum"
              :precision="0"
              :min="0"
              :max="1000"
              :controls="false"></el-input-number>
          </div>
          <div class="numClick">
            <el-button type="success" size="medium" @click="clickNumBtn">{{
              isNumBtnGenerate ? "停止" : "开始"
            }}</el-button>
          </div>
        </div>
        <div class="numShow">
          <span>{{ randomNum ? randomNum : "请先点击按钮" }}</span>
        </div>
      </div>
      <div class="turntableContainer">
        <div
          class="turntable"
          :class="getCursorClass()"
          @mouseenter="me"
          @mouseleave="ml">
          <!-- Unnamed (Group) -->
          <div class="disc-box">
            <!-- Unnamed (Image) -->
            <div class="disc-spinning" @click="radom($event)">
              <img src="../../../assets/images/luckDraw/turntable.png" tabindex="0">
            </div>
            <!-- Unnamed (Triangle) -->
            <div class="point">
              <img src="../../../assets/images/luckDraw/arrow.png">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { generateRandomNumInScope } from "../../../utils/math/index.js";

  export default {
    name: "LuckDraw",
    data() {
      return {
        isIn: false,
        curClassList: [
          "cursorToKeQingOne",
          "cursorToKeQingTwo",
          "cursorToMiku",
          "cursorToBlue",
        ],
        fromNum: 1,
        toNum: 100,
        randomNum: "",
        isNumBtnGenerate: false,
        numTimer: null,
        //旋转角度
        deg: 0,
        incraese: 0,
      };
    },
    mounted() {},
    methods: {
      getCursorClass() {
        if (this.isIn) {
          return this.curClassList[this.whichCur];
        } else {
          return "";
        }
      },
      me() {
        this.isIn = true;
        this.whichCur = generateRandomNumInScope(0, 3); //随机0到3
      },
      ml() {
        this.isIn = false;
      },
      clickNumBtn() {
        if (this.fromNum == "" || this.toNum == "") {
          this.$message.warning("");
        } else {
        }
        if (this.isNumBtnGenerate) {
          if (this.numTimer) {
            clearInterval(this.numTimer);
          }
          this.numTimer = null;
        } else {
          this.numTimer = setInterval(() => {
            this.randomNum = generateRandomNumInScope(this.fromNum, this.toNum);
          }, 80);
        }
        this.isNumBtnGenerate = !this.isNumBtnGenerate;
      },
      radom() {
        if (this.incraese !== 0) return
        let ele = document.querySelector(".disc-spinning");
        this.deg = 1000 + (Math.random() * 500>>>0)
        this.rotate(ele)
      },
      rotate(element) {
        if (this.deg - this.incraese > 800) this.incraese += 13;
        else if (this.deg - this.incraese > 700) this.incraese += 12;
        else if (this.deg - this.incraese > 600) this.incraese += 11;
        else if (this.deg - this.incraese > 500) this.incraese += 10;
        else if (this.deg - this.incraese > 400) this.incraese += 9;
        else if (this.deg - this.incraese > 300) this.incraese += 8;
        else if (this.deg - this.incraese > 200) this.incraese += 7;
        else if (this.deg - this.incraese > 100) this.incraese += 6;
        else if (this.deg - this.incraese > 50) this.incraese += 5;
        else if (this.deg - this.incraese > 20) this.incraese += 4;
        else if (this.deg - this.incraese > 10) this.incraese += 3;
        else if (this.deg - this.incraese > 5) this.incraese += 2;
        else if (this.deg - this.incraese > 3) this.incraese += 1;
        else if (this.deg - this.incraese > 2) this.incraese += 0.5;
        else if (this.deg - this.incraese >= 1) this.incraese += 1;
        console.log(this.incraese + "----------" + this.deg);
        if (this.incraese < this.deg) {
          setTimeout(() => {
            this.rotate(element);
          }, 16.7);
          element.style.transform = "rotate(" + this.incraese + "deg)";
        } else {
          this.incraese = 0;
        }
      },
    },
  };
</script>

<style lang="less" scoped>
  .world {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .title {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: aliceblue;
    }
    .container {
      width: 100%;
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      .numLuckDraw {
        width: 100%;
        max-height: 50%;
        min-height: 240px;
        display: flex;
        flex-direction: column;
        .numRuleConfig {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 0 16px;
          .rangNum {
            display: flex;
            margin-right: 8px;
          }
        }
        .numShow {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          flex: 1;
          background-color: #6f6966;
          font-size: 96px;
          letter-spacing: 5px;
          -webkit-text-stroke: 2px white;
          color: transparent;
          font-weight: bold;
          span {
            text-align: center;
          }
        }
      }
      .turntableContainer {
        width: 100%;
        max-height: 50%;
        min-height: 450px;
        display: flex;
        justify-content: center;
        align-items: center;
        .turntable {
          width: 300px;
          height: 300px;
          .disc-box {
            width: 100%;
            height: 100%;
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            .disc-spinning {
              width: 100%;
              height: 100%;
              display: inline-block;
              font-size: 0;
            }
            .point {
              position: absolute;
              left: 130px;
              top: 56px;
            }
          }
        }
      }
    }
  }

  // @keyframes animated_div {
  //   0% {
  //     transform: rotate(0deg);
  //   }
  //   100% {
  //     transform: rotate(720deg);
  //   }
  // }
  // .rate {
  //   animation: animated_div 5s ease 1 forwards;
  // }
  .cursorToKeQingOne {
    cursor: url("../../../assets/images/luckDraw/Button.png"), auto;
  }
  .cursorToKeQingTwo {
    cursor: url("../../../assets/images/luckDraw/Hand.png"), auto;
  }
  .cursorToMiku {
    cursor: url("../../../assets/images/luckDraw/handw.png"), auto;
  }
  .cursorToBlue {
    cursor: url("../../../assets/images/luckDraw/HandA.png"), auto;
  }
</style>
